<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/upload.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .required {
            color: red;
            margin: 0 5px;
        }
    </style>
</head>
<body style="padding: 15px">
<div class="layui-container">
    <form class="layui-form" id="dataForm" lay-filter="dataForm">
        <input type="hidden" name="userinfoId">
        <input type="hidden" name="driverId">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label"><span class="required">*</span>用户名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="username" id="username" placeholder="请输入用户名"
                       lay-verify="required" lay-reqtext="用户名不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="nickname" class="layui-form-label"><span class="required">*</span>昵称</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="nickname" id="nickname" placeholder="请输入昵称"
                       lay-verify="required" lay-reqtext="昵称不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" lay-verify="phone" class="layui-input" name="phone" id="phone"
                       placeholder="请输入手机号">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="roleId" class="layui-form-label"><span class="required">*</span>角色</label>
            <div class="layui-input-block">
                <select lay-filter="roleId" name="roleId" id="roleId">
                    <option value="1">管理员</option>
                    <option value="2">负责人</option>
                    <option value="3">员工</option>
                    <option value="4">司机</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="departmentDiv">
            <label for="departmentId" class="layui-form-label"><span class="required">*</span>部门</label>
            <div class="layui-input-block">
                <select name="departmentId" id="departmentId">
                </select>
            </div>
        </div>
        <div id="driverDiv">
            <div class="layui-form-item">
                <label for="driveAge" class="layui-form-label">驾龄</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="driveAge" id="driveAge" placeholder="请输入驾龄">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="level" class="layui-form-label"><span class="required">*</span>驾照等级</label>
                <div class="layui-input-block">
                    <select name="level" id="level">
                        <option value="1">A证</option>
                        <option value="2">B证</option>
                        <option value="3">C证</option>
                        <option value="4">D证</option>
                        <option value="4">E证</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="licensePhoto1" class="layui-form-label"><span class="required">*</span>驾照正面</label>
                <div class="layui-input-block">
                    <input type="hidden" class="layui-input" name="licensePhoto1" id="licensePhoto1">
                    <button type="button" class="layui-btn upload-btn" id="upload_btn_licensePhoto1">上传图片</button>
                    <fieldset class="layui-elem-field upload-field">
                        <legend>图片列表</legend>
                        <div class="layui-field-box img-list" id="upload_list_licensePhoto1">

                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="licensePhoto2" class="layui-form-label"><span class="required">*</span>驾照反面</label>
                <div class="layui-input-block">
                    <input type="hidden" class="layui-input" name="licensePhoto2" id="licensePhoto2">
                    <button type="button" class="layui-btn upload-btn" id="upload_btn_licensePhoto2">上传图片</button>
                    <fieldset class="layui-elem-field upload-field">
                        <legend>图片列表</legend>
                        <div class="layui-field-box img-list" id="upload_list_licensePhoto2">

                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="status" class="layui-form-label"><span class="required">*</span>状态</label>
            <div class="layui-input-block">
                <select name="status" id="status">
                    <option value="1">可用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="avatar" class="layui-form-label"><span class="required">*</span>头像</label>
            <div class="layui-input-block">
                <input type="hidden" class="layui-input" name="avatar" id="avatar" lay-verify="required"
                       lay-reqtext="请上传用户头像">
                <button type="button" class="layui-btn upload-btn" id="upload_btn_avatar">上传图片</button>
                <fieldset class="layui-elem-field upload-field">
                    <legend>图片列表</legend>
                    <div class="layui-field-box img-list" id="upload_list_avatar">

                    </div>
                </fieldset>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    var form;
    var upload;
    /*判断是否为修改*/
    const dataId = sessionStorage.getItem("dataId") || "";
    $(function () {
        layui.use(function () {
            form = layui.form;
            upload = layui.upload;
            /*配置动态表单*/
            setRoleSelect();
            /*获取当前登录用户id*/
            const loginId = "${loginInfo.userinfoId}";
            if (loginId === dataId) {
                $("#roleId").prop("disabled", true);
                $("#status").prop("disabled", true);
                $("#departmentId").prop("disabled", true);
            }
            /*获取部门列表*/
            getDepartmentList();
            /*获取表单数据*/
            getFormData();
            /*渲染上传组件*/
            initUpload("avatar");
            initUpload("licensePhoto1");
            initUpload("licensePhoto2");
            /*监听角色选择框选择事件*/
            form.on("select(roleId)", function () {
                setRoleSelect();
            })
            /*监听表单提交*/
            form.on("submit(save)", function ({field}) {
                const formData = {...field};
                switch (field.roleId) {
                    case "2":
                    case "3":
                        formData.level = "";
                        formData.driveAge = "";
                        formData.licensePhoto1 = "";
                        formData.licensePhoto2 = "";
                        break;
                    case "4":
                        if (!formData.licensePhoto1) {
                            layer.msg("请上传驾照正面！", {icon: 5});
                            return;
                        }
                        if (!formData.licensePhoto2) {
                            layer.msg("请上传驾照反面！", {icon: 5});
                            return;
                        }
                        formData.departmentId = "";
                        break;
                    default:
                        formData.level = "";
                        formData.driveAge = "";
                        formData.licensePhoto1 = "";
                        formData.licensePhoto2 = "";
                        formData.departmentId = "";
                        break;

                }
                $.ajax({
                    url: "userinfo/update",
                    data: {
                        userinfoId: dataId,
                        ...formData
                    },
                    method: "post",
                    dataType: "json",
                    success(res) {
                        if (res.code === 200) {
                            parent.layer.msg('操作成功！', {icon: 6}, function () {
                                let index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                                parent.layer.close(index); // 再执行关闭
                                /*刷新list页面的table*/
                                parent.table.reload('dataTable');
                            });
                        } else {
                            layer.alert(res.msg)
                        }
                    }
                });
                return false;
            });
        })
    })

    function getDepartmentList() {
        $.ajax({
            url: "department/select",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    let $html = '<option value="">[选择部门]</option>';
                    for (let r of res.data) {
                        $html += '<option value="' + r.id + '">' + r.name + '</option>';
                    }
                    $("#departmentId").empty().append($html);
                    /*重新渲染表单中的select标签，不设置的话，下拉框效果无法实现*/
                    form.render('select');
                }
            }
        })
    }

    function getFormData() {
        if (dataId) {
            /*禁止修改用户名*/
            $("#username").prop("readonly", true);
            /*获取后立即删除*/
            sessionStorage.removeItem("dataId");
            $.ajax({
                url: "userinfo/info/" + dataId,
                method: "get",
                success(res) {
                    if (res.code === 200) {
                        form.val('dataForm', res.data);
                        setImg(res.data.avatar, "avatar");
                        if (res.data.roleId === 4) {
                            form.val("dataForm", res.data.driver);
                            setImg(res.data.driver.licensePhoto1, "licensePhoto1");
                            setImg(res.data.driver.licensePhoto2, "licensePhoto2");
                        }

                        setRoleSelect();
                    }
                }
            })
        }
    }

    function setRoleSelect() {
        let roleId = $("#roleId").val();
        switch (roleId) {
            case "2":
            case "3":
                $("#departmentDiv").show();
                $("#driverDiv").hide();
                break;
            case "4":
                $("#departmentDiv").hide();
                $("#driverDiv").show();
                break;
            default:
                $("#departmentDiv").hide();
                $("#driverDiv").hide();
                break;
        }
    }

    function initUpload(id) {
        upload.render({
            elem: "#upload_btn_" + id,
            url: "upload",
            /*设置允许上传的文件类型，默认为image*/
            accept: "image",
            /*设置文件选择时可以看到的文件类型*/
            acceptMime: "image/*",
            /*设置允许上传的文件大小*/
            size: 1024 * 20,
            /*上传时携带的参数*/
            data: {
                type: id
            },
            /*上传成功的回调函数*/
            done(res) {
                if (res.code === 200) {
                    $("#" + id).val(res.data.filename);
                    setImg(res.data.filename, id)
                }
            }
        });
    }

    function setImg(filename, id) {
        const $html = '<div class="img-item"><img src="' + filename + '" alt=""><div class="img-opt"><i class="layui-icon layui-icon-eye" title="点击查看详情" onclick="showImg(\'' + filename + '\')"></i><i class="layui-icon layui-icon-delete" title="点击删除图片" onclick="deleteImg(this)"></i></div></div>';
        $("#upload_list_" + id).empty().append($html).parents(".upload-field").show();
    }

    function showImg(imgSrc) {
        parent.layer.open({
            type: 1,
            title: "图片详情",
            area: ["500px", "auto"],
            content: '<a href="' + imgSrc + '" title="点击查看原图" target="_blank"><img style="display: block;max-width: 100%;height: auto;" alt="图片加载异常" src="' + imgSrc + '"></a>'
        });
    }

    function deleteImg(_this) {
        parent.layer.confirm('确定删除该图片吗?', {icon: 3, title: "删除图片"}, function (index) {
            /*删除当前图片的表单数据*/
            $(_this).parents(".layui-form-item").find('input[type="hidden"]').val("")
            /*因此图片列表*/
            $(_this).parents(".upload-field").hide();
            /*删除当前图片*/
            $(_this).parents(".img-item").remove();
            parent.layer.close(index);
        })
    }

</script>
</html>
